revision:
The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit and specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
The <figcaption> element is used to add a caption for the <figure> element.
While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.
The difference with <img> is that <figure> with all its content is treated as a unit.
<figure> <figcaption>. . . . . . . . </figcaption> . . </figure>
code: <figure> <img src="../../pics/8.jpg" alt="on the beach"> <figcaption>Spending a good time on the beach</figcaption> </figure>
navigator
.function NavigatorExample() { var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); }
code: <figure> <figcaption>Get browser div using <code>navigator</code>.</figcaption> <pre> function NavigatorExample() { var txt; txt = "Browser CodeName: " + navigator.appCodeName + "; "; txt+= "Browser Name: " + navigator.appName + "; "; txt+= "Browser Version: " + navigator.appVersion + "; "; txt+= "Cookies Enabled: " + navigator.cookieEnabled + "; "; txt+= "Platform: " + navigator.platform + "; "; txt+= "User-agent header: " + navigator.userAgent + "; "; console.log("NavigatorExample", txt); } </pre> </figure>
If debugging is the process of removing software bugs, then programming must be the process of putting them in.
code: <figure> <figcaption><cite>Edsger Dijkstra:</cite></figcaption> <blockquote>If debugging is the process of removing software bugs, then programming must be the process of putting them in.</blockquote> </figure>
code: <figure style="display: flex; padding:1vw;border:0.3vw solid lightblue;"> <img src="../../pics/1.jpg" width="200" height="140"/> <figcaption>Fig.1 - Sunset on the river</figcaption> <img src="../../pics/2.jpg" width="200" height="140"/> <figcaption>Fig.2 - A good time on the beach</figcaption> </figure>
p {
color: #333;
font-family: Helvetica, sans-serif;
font-size: 1rem;
}
code: <figure> <pre> <code> p { color: #333; font-family: Helvetica, sans-serif; font-size: 1rem; } </code> </pre> </figure>